<html>
	<head>
	<title>Isometry</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="oop.js"></script>
	<script type="text/javascript" src="graphics.js"></script>
	<script type="text/javascript" src="sprite.js"></script>
	<script type="text/javascript">
	Class.create("Size", {
		width: 0,
		height: 0,
		__construct: function(w, h)
		{
			this.width = w;
			this.height = h;
		}
	});
	
	Class.create("Vector2D", {
		x: 0,
		y: 0,
		__construct: function(x, y)
		{
			this.x = x;
			this.y = y;
		}
	});
	
	Class.create("AreaSelection", {
		gfx: null,
		name: null,
		backgroundImage: null,
		backgroundColor: null,
		gridCoordinate: null,
		areaStart: null,
		areaStop: null,
		selectingArea: false,
		container: null,
		invalid: false,
		cellSize: null,
		areaChanged: null,
		tilesetChanged: null,
		__construct: function(name)
		{
			this.backgroundColor = "#ccc";
			this.gridCoordinates = new Vector2D(0, 0);
			this.areaStart = new Vector2D(0, 0);
			this.areaStop = new Vector2D(0, 0);
			this.cellSize = new Size(32, 32);
			this.name = name;
			
			this.container = $('<div />').attr('id', name+".container");
			this.container.css('width', 273+'px');
			this.container.css('height', 480+'px');
			this.container.css('backgroundColor', this.backgroundColor);
			this.container.css('overflow', 'auto');
			
			this.gfx = new Graphics(name, 0, 0);

			var scaleX = 1.0 / this.cellSize.width;
			var scaleY = 1.0 / this.cellSize.height;
			var spr = this;
			$(this.gfx.handle).mousemove(function(e)
			{
				spr.gridCoordinates.x = (e.pageX - $(spr.gfx.handle).offset().left) * scaleX;
				spr.gridCoordinates.y = (e.pageY - $(spr.gfx.handle).offset().top) * scaleY;
				if(spr.selectingArea)
				{
					spr.invalid = true;
				}
			});
			
			$(this.gfx.handle).mousedown(function(e)
			{
				if(e.button == 2)
				{
					spr.selectingArea = true;
					spr.areaStart.x = Math.floor(spr.gridCoordinates.x);
					spr.areaStart.y = Math.floor(spr.gridCoordinates.y);
				}
				spr.invalid = true;
			});
			
			var ac = this.areaChanged;
			$(window).mouseup(function(e)
			{
				if(e.button)
				{
					if(spr.selectingArea)
					{
						spr.selectingArea = false;
						spr.areaStop.x = Math.ceil(spr.gridCoordinates.x);
						spr.areaStop.y = Math.ceil(spr.gridCoordinates.y);
						spr.invalid = true;
						if(ac)
						{
							ac({start: spr.areaStart, stop: spr.areaStop});
						}
					}
				}
			});
			
			this.container.append(this.gfx.handle);
			$('body').append(this.container);
			
			this.invalid = true;
		},
		setTileset: function(spr)
		{
			var me = this;
			var ctx = this.gfx;
			this.backgroundImage = spr;
			if(spr.context)
			{
				ctx.width(spr.width());
				ctx.height(spr.height());
				me.invalid = true;
			}
			this.backgroundImage.onevent = function(e)
			{
				ctx.width(e.data.width());
				ctx.height(e.data.height());
				me.invalid = true;
			}
			if(this.tilesetChanged)
			{
				this.tilesetChanged({tileset: this.backgroundImage});
			}
		},
		drawArea: function(from, to)
		{
			var tmp;
			//if(from.x > to.x) { tmp = from.x; from.x = to.x; to.x = tmp; }
			//if(from.y > to.y) { tmp = from.y; from.y = to.y; to.y = tmp; }
			var ex = (to.x-from.x);
			var ey = (to.y-from.y);
			if(ex < 1) { ex = 1; }
			if(ey < 1) { ey = 1; }
			var sx = from.x*this.cellSize.width;
			var sy = from.y*this.cellSize.height;
			ex *= this.cellSize.width;
			ey *= this.cellSize.height;
				
			this.gfx.context.fillStyle = "rgba(255, 255, 255, 0.35)";
			this.gfx.context.strokeStyle = "rgba(0, 0, 0, 0.25)";
			this.gfx.context.fillRect(sx+0.5, sy+0.5, ex-1, ey-1);
			this.gfx.context.strokeRect(sx+0.5, sy+0.5, ex-1, ey-1);
		},
		update: function()
		{
			if(this.gfx && this.invalid)
			{
				this.gfx.context.clearRect(0, 0, this.gfx.width(), this.gfx.height());
				this.gfx.context.save();
				
				var xLen = this.gfx.width();
				var yLen = this.gfx.height();
				if(this.backgroundImage)
				{
					xLen = this.backgroundImage.width();
					yLen = this.backgroundImage.height();
					this.gfx.drawImage(this.backgroundImage, 0, 0);
				}
				
				var scaleX = 1.0 / this.cellSize.width;
				var scaleY = 1.0 / this.cellSize.height;
				
				
				for(var x = 0; x < xLen * scaleX; ++x)
				{
					this.gfx.context.beginPath();
					this.gfx.context.moveTo(((x*32)+0.5), 0);
					this.gfx.context.lineTo((x*32)+0.5, yLen);
					this.gfx.context.closePath();
					this.gfx.context.strokeStyle = "rgba(0, 0, 0, 0.05)";
					this.gfx.context.stroke();
				}
				for(var y = 0; y < yLen * scaleY; ++y)
				{
					this.gfx.context.beginPath();
					this.gfx.context.moveTo(0, ((y*32)+0.5));
					this.gfx.context.lineTo(xLen, ((y*32)+0.5));
					this.gfx.context.closePath();
					this.gfx.context.strokeStyle = "rgba(0, 0, 0, 0.05)";
					this.gfx.context.stroke();
				}

				if(this.selectingArea)
				{
					this.drawArea(this.areaStart, this.gridCoordinates);
				} else {
					this.drawArea(this.areaStart, this.areaStop);
				}

				this.gfx.context.restore();
				this.invalid = false;
			}
		}
	});
	
	var areaSelectionTool;
	
	function update()
	{
		areaSelectionTool.update();
		setTimeout("update()", 10);
	}
	
	$(window).load(function()
	{
		areaSelectionTool = new AreaSelection("areaSelectionTool0");
		areaSelectionTool.setTileset(Sprite.fromFile("Tilesets\\zyndikates%20grassland.png"));
		update();
	});
	</script>
	</head>
	<body>
	
	</body>
</html>